<script setup>
import { getSalesBoardXsdq } from "@/api/visual/salesBoard";
import { $formatechartData, fontSize } from "@/utils/globalMethod.js";

const key = ref(1);
const optionData = ref([]);
const option = computed(() => ({
  title: {
    text: "销售地区分析",
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
  },

  series: [
    {
      name: "销售地区分析",
      type: "pie",
      data: optionData.value,
      radius: "60%",
      center: ["50%", "50%"],
      label: {
        show: true,
        formatter: "{b}:{c}",
        color: "#fff",
        textStyle: {
          fontSize: fontSize(0.12),
        },
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
}));

const loadData = async () => {
  const { data } = await getSalesBoardXsdq({ name: 1 });
  optionData.value = $formatechartData(data, "AreaName", "XSTotal").filter(
    (item) => item.value > 0
  );
};

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(loadData);

onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box7 :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box7>
  </div>
</template>

<style scoped lang="scss"></style>
